<style>
    .c_liao {
        position: fixed;
        /*top: 0;*/
        bottom: 20px;
        /*left: 0;*/
        right: 20px;
        margin: auto;
        width: 684px;
        height: 496px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.19);
        border-radius: 4px;
        z-index: 999;
    }

    .c_liao_p {
        height: 40px;
        background: rgba(52, 99, 230, 1);
        border-radius: 4px 4px 0px 0px;
        font-size: 14px;
        color: rgba(255, 255, 255, 1);
        line-height: 40px;
        padding-left: 20px;
    }

    .c_liao_l {
        width: 230px;
        background-color: #F8F8F8;
        height: 456px;
        border-right: 1px solid #EDEDED;
    }

    .c_liao_i {
        /*height: 75px;*/
        padding: 15px 20px;
        font-size: 16px;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
    }

    .c_liao_i_1 {
        background-color: #fff;
    }

    .c_liao_i_2 {
        background-color: #F8F8F8;
    }

    .c_liao_i img {
        vertical-align: middle;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        margin-right: 14px;
    }

    .c_liao_t {
        height: 40px;
        background: rgba(248, 248, 248, 1);
        font-size: 14px;
        line-height: 40px;
        color: rgba(51, 51, 51, 1);
        padding: 0 20px;
    }

    .c_liao_t span {
        color: #3463E6;
        float: right;
    }

    .c_liao_m {
        background-color: #fff;
        height: 262px;
        border-bottom: 1px solid #EDEDED;
    }

    .c_liao_b {
        height: 80px;
    }

    textarea {
        width: 413px;
        height: 60px;
        padding: 10px 20px;
        outline: none;
    }

    .c_btn {
        width: 96px;
        height: 32px;
        background: rgba(52, 99, 230, 1);
        border-radius: 4px;
        font-size: 14px;
        color: rgba(255, 255, 255, 1);
        line-height: 32px;
        float: right;
        margin-right: 20px;
        text-align: center;
        margin-top: 20px;
    }

    .aui-chat {
        width: 100%;
        height: 100%;
        padding: 0 10px;
        overflow-y: scroll;
    }

    .aui-chat .aui-chat-header {
        width: 100%;
        text-align: center;
        margin-bottom:16px;
        margin-top: 24px;
        font-size: 14px;
        line-height: 20px;
        color: #999;
    }

    .aui-chat .aui-chat-left .aui-chat-media {
        width: 42px;
        height: 42px;
        float: left;
        margin-right: 15px;
    }

    .aui-chat .aui-chat-right .aui-chat-media {
        width: 42px;
        height: 42px;
        float: right;
        margin-left: 15px;
    }
    .aui-chat .aui-chat-media img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
    .aui-chat .aui-chat-media {
        display: inline-block;
        max-width: 42px;
    }

    .aui-chat .aui-chat-arrow {
        content: '';
        position: absolute;
        width: 12px;
        height: 12px;
        top: 13px;
        -webkit-transform-origin: 50% 50% 0;
        transform-origin: 50% 50% 0;
        background-color: transparent;
    }

    .aui-chat .aui-chat-left .aui-chat-content {
        background-color: rgba(248, 248, 248, 1);
        float: left;
        right: 8px;
        line-height: 22px;
        color: #333333;
        font-size: 16px;
        padding: 10px 15px;
        max-width: 245px;
    }

    .aui-chat .aui-chat-right .aui-chat-content {
        background-color: #69C487;
        right: 8px;
        line-height: 22px;
        float: right;
        color: #fff;
        font-size: 16px;
        padding: 10px 15px;
        max-width: 245px;
    }

    .aui-chat .aui-chat-left .aui-chat-arrow {
        background-image: -webkit-linear-gradient(45deg, rgba(248, 248, 248, 1), rgba(248, 248, 248, 1) 50%, transparent 50%);
        background-image: linear-gradient(45deg, rgba(248, 248, 248, 1), rgba(248, 248, 248, 1) 50%, transparent 50%);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        left: -5px;
    }

    .aui-chat .aui-chat-right .aui-chat-arrow {
        background-image: -webkit-linear-gradient(45deg, #69C487, #69C487 50%, transparent 50%);
        background-image: linear-gradient(45deg, #69C487, #69C487 50%, transparent 50%);
        -webkit-transform: rotate(-135deg);
        transform: rotate(-135deg);
        right: -5px;
    }

    .aui-chat .aui-chat-content {
        color: #212121;
        font-size: 14px;
        border-radius: 5px;
        /*min-height: 40px;*/
        position: relative;
        padding: 10px;
        max-width: 80%;
        word-break: break-all;
        word-wrap: break-word;
    }

    .left_img {
        width: 14px;
        height:18px;
        display: inline-block;
        position: relative;
        top: 2px;
        margin-right: 8px;
    }

    .right_img {
        width: 14px;
        height: 18px;
        display: inline-block;
        position: relative;
        top: 2px;
        margin-left: 8px;
    }

    .all_txt {
        margin-top: 5px;
        line-height: 20px;
        color: #333;
        font-size: 14px;
        width: 100%;
    }

    .all_txt .txt {
        background-color: #fff;
        padding: 10px;
        max-width: 245px;
        border-radius: 5px;
    }

    .aui-chat .aui-chat-right .all_txt .txt {
        float: right;
    }

    .left_name {
        text-align: left;
        width: 65px;
        max-width: 75px;
    }

    .right_name {
        text-align: right;
        width: 65px;
        max-width:  75px;
    }

    .after:after {
        content: '';
        display: block;
        clear: both;
    }
    .aui-icon-info:before {
        content: "";
    }
    .hidden{
        display: none;
    }
</style>
<div class="c_liao hidden">
    <div class="c_liao_p">咨询<span class="yincang" style="float: right;padding-right: 20px;cursor: pointer;" onclick="hiddenwechat();">x</span></div>
    <div style="height: 456px;">
        <div class="c_liao_t" id="whoname">
            龙平 <span></span>
        </div>
        <div class="c_liao_m">
            <section class="aui-chat" id="ajaxdata">
            </section>
        </div>
        <div class="c_liao_b">
            <textarea id="content" name="name" onkeydown="ttt(event)" placeholder="请输入…" style="resize:none;"></textarea>
        </div>

        <div class="c_btn" onclick="sendwechatmessage();">发送</div>
        <!---->
        <input type="hidden" id="otherid" value="" />
        <input type="hidden" id="myimage" value="{$Think.session.user_image}" />
        <!---->
    </div>
</div>
<script type="text/javascript">
    function ttt(event) {
        var theEvent = event || window.event;
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (code == 13) {
            //回车执行查询
//            sendwechatmessage();
        }

    }
    //获取和某人的聊天内容
    var page = 1;
    function gettalk(uid) {
        $.ajax({
            url: '/home/Economic/getNewsRecForPc',
            data: 'user_id_other='+uid+'&page='+page,
            type: 'POST',
            dataType: 'JSON',
            success: function (returnData) {
                if(returnData.status == 200){
                    $('#otherid').val(uid); //给聊天对象赋值
                    $('#whoname').text(returnData.who); //给聊天框上面给名字
//
                    $('#ajaxdata').empty();
                    var datas = returnData.msg;
                    $.each(datas,function(key,v){
                        if(v.m_one_user_id == returnData.user_id){
                            $("#ajaxdata").append('<div class="aui-chat-header"></div>'+
                                '<div class="aui-chat-item aui-chat-right">'+
                                '<div class="after">'+
                                '<div class="aui-chat-media">'+
                                '<img src="'+v.user_image+'" />'+
                                '</div>'+
                                '<div class="aui-chat-inner">'+
                                '<div class="aui-chat-content">'+
                                '<div class="aui-chat-arrow"></div>'+
                                '<div class="flex-wrap">'+
                                '<div>'+v.m_content+'</div>'+
                                '</div>'+
                                '</div>'+
                                '<div class="aui-chat-status">'+
                                '<i class="aui-iconfont aui-icon-info aui-text-danger"></i>'+
                                '</div>'+
                                '</div>'+
                                '</div>'+
                                '</div>');
                        }else{
                            $("#ajaxdata").append('<div class="aui-chat-header"></div>'+
                                '<div class="aui-chat-item aui-chat-left">'+
                                '<div class="aui-chat-media">'+
                                '<img src="'+v.user_image+'" />'+
                                '</div>'+
                                '<div class="aui-chat-inner">'+
                                '<div class="aui-chat-content">'+
                                '<div class="aui-chat-arrow"></div>'+
                                '<div class="flex-wrap">'+
                                '<div>'+v.m_content+'</div>'+
                                '</div>'+
                                '</div>'+
                                '</div>'+
                                '<div class="flex-wrap all_txt">'+
                                '<div class="left_name aui-ellipsis-1"></div>'+
                                '<div class="flex-con">'+
                                '</div>'+
                                '</div>'+
                                '</div>');
                        }

                    });

                    $("#ajaxdata").append('<a name="miao" id="miao_a"></a>'); //加锚点
//
                    $('.c_liao').removeClass('hidden');
                    location.href = '#miao'; //跳到锚点
                }else if(returnData.status == 404){
                    location.href='{:url('home/Login/indexLogin')}'
                }else{
                    alert(returnData.msg)
                }
            },
            error: function () {
                alert('服务器错误，请刷新重试！');
            }
        })
    }
    //发聊天信息
    function sendwechatmessage(){
        var con = $('#content').val().trim(); //1.获取内容
        if(con == ''){
            alert('内容不能为空！');
            $('#content').val('');
            return;
        }else{
            var user_id_other = $('#otherid').val(); //2.获取对象id
            var myimage = $('#myimage').val(); //3.获取我的头像
            $.ajax({
                url: '/home/Economic/startChatsForPC',
                data: 'user_id_other='+user_id_other+'&m_content='+con,
                type: 'POST',
                dataType: 'JSON',
                success: function (returnData) {
                    if(returnData.status == 200){
                        $("#ajaxdata").append('<div class="aui-chat-header"></div>'+
                            '<div class="aui-chat-item aui-chat-right">'+
                            '<div class="after">'+
                            '<div class="aui-chat-media">'+
                            '<img src="'+myimage+'" />'+
                            '</div>'+
                            '<div class="aui-chat-inner">'+
                            '<div class="aui-chat-content">'+
                            '<div class="aui-chat-arrow"></div>'+
                            '<div class="flex-wrap">'+
                            '<div>'+con+'</div>'+
                            '</div>'+
                            '</div>'+
                            '<div class="aui-chat-status">'+
                            '<i class="aui-iconfont aui-icon-info aui-text-danger"></i>'+
                            '</div>'+
                            '</div>'+
                            '</div>'+
                            '</div>');
                        $("#miao_a").remove(); //移除原先的锚点
                        $("#ajaxdata").append('<a name="miao" id="miao_a"></a>'); //加新的锚点
                        $('#content').val(''); //清空聊天框
                        location.href = '#miao'; //跳到新的锚点
                    }else{
                        alert(returnData.msg);
                    }
                },
                error: function () {
                    alert('服务器错误，请刷新重试！');
                }
            })
        }
    }
//    $('.c_btn').click(function () {
//        var con = $('#content').val().trim(); //1.获取内容
//        if(con == ''){
//            alert('内容不能为空！');
//        }else{
//            var user_id_other = $('#otherid').val(); //2.获取对象id
//            var myimage = $('#myimage').val(); //3.获取我的头像
//            $.ajax({
//                url: '/home/Economic/startChatsForPC',
//                data: 'user_id_other='+user_id_other+'&m_content='+con,
//                type: 'POST',
//                dataType: 'JSON',
//                success: function (returnData) {
//                    if(returnData.status == 200){
//                        $("#ajaxdata").append('<div class="aui-chat-header"></div>'+
//                            '<div class="aui-chat-item aui-chat-right">'+
//                            '<div class="after">'+
//                            '<div class="aui-chat-media">'+
//                            '<img src="'+myimage+'" />'+
//                            '</div>'+
//                            '<div class="aui-chat-inner">'+
//                            '<div class="aui-chat-content">'+
//                            '<div class="aui-chat-arrow"></div>'+
//                            '<div class="flex-wrap">'+
//                            '<div>'+con+'</div>'+
//                            '</div>'+
//                            '</div>'+
//                            '<div class="aui-chat-status">'+
//                            '<i class="aui-iconfont aui-icon-info aui-text-danger"></i>'+
//                            '</div>'+
//                            '</div>'+
//                            '</div>'+
//                            '</div>');
//                        $("#miao_a").remove(); //移除原先的锚点
//                        $("#ajaxdata").append('<a name="miao" id="miao_a"></a>'); //加新的锚点
//                        $('#content').val(''); //清空聊天框
//                        location.href = '#miao'; //跳到新的锚点
//                    }else{
//                        alert(returnData.msg);
//                    }
//                },
//                error: function () {
//                    alert('服务器错误，请刷新重试！');
//                }
//            })
//        }
//    });
    function hiddenwechat() {
        $('.c_liao').addClass('hidden');
    }
//    $('.yincang').click(function () {
//        $('.c_liao').addClass('hidden');
//    });
</script>